<script lang="ts" setup>
import { CarRule } from "@/apis/card";
import type { CarRuleParams, RowCar } from "@/types/card";
import { onMounted, ref } from "vue";
import { utils, write, writeFileXLSX } from "xlsx";

const params = ref<CarRuleParams>({
  page: 1,
  pageSize: 2,
});
const Ruledata = ref<RowCar[]>([]);
const total = ref<number>(0);
const getRuleList = async () => {
  const res = await CarRule(params.value);
  console.log("res", res);
  total.value = res.data.total;
  Ruledata.value = res.data.rows;
};
// 时长收费:duration,按次收费:turn,分段收费:partition
const chargeType = new Map<RowCar["chargeType"], string>([
  ["duration", "时长收费"],
  ["turn", "按次收费"],
  ["partition", "分段收费"],
]);
onMounted(() => {
  getRuleList();
});
// 导出表格excel
const exportExcel = () => {
  // 创建一个工作簿文件
  const workbook=utils.book_new()
  // 创建一个工作表
  const worksheet=utils.json_to_sheet(Ruledata.value.map((item,index)=>{
    return {
      ...item,
      id:index+1,
      chargeType:chargeType.get(item.chargeType)
    }
  }))
  // 添加表头,替换原来的英文表头
  utils.sheet_add_aoa(worksheet,[["序号","计费规则编号","计费规则名称","免费时长(分钟)","收费上限(元)","计费方式","计费规则"]],{origin:'A1'})
  // 将工作表添加到工作簿文件中
  utils.book_append_sheet(workbook,worksheet,'计费规则')
  // 生成excel文件
  writeFileXLSX(workbook,`计费规则.xlsx`)
};
</script>

<template>
  <div class="rule-container">
    <div class="create-container">
      <el-button type="primary">增加停车计费规则</el-button>
      <el-button @click="exportExcel">导出Excel</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="Ruledata" style="width: 100%">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column label="计费规则编号" prop="ruleNumber" />
        <el-table-column label="计费规则名称" prop="ruleName" />
        <el-table-column label="免费时长(分钟)" prop="freeDuration" />
        <el-table-column label="收费上限(元)" prop="chargeCeiling" />
        <el-table-column label="计费方式" width="120">
          <template #default="scope">
            {{ chargeType.get(scope.row.chargeType) }}
          </template>
        </el-table-column>
        <el-table-column label="计费规则" prop="ruleNameView" width="400" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="small" type="text">编辑</el-button>
            <el-button size="small" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      v-model:current-page="params.page"
      v-model:page-size="params.pageSize"
      :page-sizes="[2, 4, 6, 8]"
      layout="total, sizes, prev, pager, next"
      :total="total"
      @change="getRuleList"
    />
    <!-- 编辑对话框 -->
    <el-dialog
    title="Tips"
    width="500"

  >
    <span>This is a message</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button >Cancel</el-button>
        <el-button type="primary">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.rule-container {
  padding: 20px;
  background-color: #fff;
}

.rules .el-form-item {
  padding: 0 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>
